<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding-bottom: 800px;
            padding-left: 30px;
        }

       .card{
            width: 400px;
            min-height: 100px;
            border: 1px solid #dedede;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 0 10px 2px #ccc;
            margin: 20px;
       }
       .header{
            padding: 10px;
            border-bottom: 1px solid#ccc;
       }
       .content{
        padding: 10px;
       }
    </style>
</head>

<body>
    <div id="app">
        <h4>组件分发（具名插槽）</h4>
        <pre>
        对slot插槽组件而言，组件分发本身所实现的是根据定义的名称完成分发内容匹配渲染填充；
            + slot组件的name属性默认取值为 default，所以基本插槽的使用就是具名插槽的默认分发功能;
            + slot组件可以通过修改 name 属性的方式改变插槽的名称，组件调用时的标签主体中通过 template + v-slot:名称 方式完成指定匹配
            + v-slot指令可以缩写为 # ，例如 v-slot:title ==> #title
            + v-slot指令也可以直接写在组件标签上，但此时只能针对组件内的一个插槽进行内容分发，不能在同时完成多个插槽的内容分发
        </pre>
        <my-card>
            <template v-slot:title>
                <span>新闻</span>
            </template>
            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </my-card>
        <my-card>
            <template v-slot:title>
                <span>头像</span>
            </template>
            <template v-slot:default>
                <img src="../../assets/img/notfoud.png" alt="" srcset="">
            </template>
        </my-card>
        <my-card>
            <template #title>
                <span>输入</span>
            </template>
            <input type="text">
        </my-card>
        <my-card v-slot:title>
            <span>分发的标签只有一段</span>
        </my-card>
        <my-card>
            <span>分发的标签只有一段</span>
        </my-card>
        <my-card #default>
            <span>分发的标签只有一段</span>
        </my-card>
    </div>
    <script type="text/x-template" id="card">
        <div class="card">
            <div class="header">
                <slot name="title"></slot>
            </div>
            <div class="content">
                <!-- 下述插槽叫做具名默认插槽 -->
                <!-- <slot></slot> -->
                <!-- 等效于如下写法 -->
                <slot name="default"></slot>
            </div>
        </div>
    </script>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../../assets/vue3/vue.esm-browser.js"

        const MyCard = {
            template:"#card",
        }

        createApp({
            components: {
                MyCard
            },
            data() {
                return {
                    
                }
            }
        }).mount("#app")
    </script>
</body>

</html>